<!-- 意见反馈 -->
<template>
	<view class="opinion-feedback">
		<view class="opinion-feedback-item">
			<view class="opinion-feedback-title">
				举报类型：
			</view>
			<view class="opinion-feedback-content-list">
				<view class="opinion-feedback-content-item" v-for="item in state.itemList" :key="item.ID"
					@click="checkedFn(item)">
					<img src="@/assets/image/icon130.png" alt="" v-if="!item.checked">
					<img src="@/assets/image/icon01.png" alt="" v-else>
					<text>{{ item.ShowName }}</text>
				</view>
			</view>
		</view>
		<view class="opinion-feedback-item">
			<view class="opinion-feedback-title">
				上传截图<text>*</text>：
			</view>
			<view class="image-list">
				<view class="image-list-item" v-for="(item,index) in state.FileList">
					<van-image radius="8rpx" width="200rpx" height="200rpx" fit="cover" :src="item.Path" />
					<uni-icons type="clear" size="24" @click="delFn(index)"></uni-icons>
				</view>
				<UploadImg @checkImg="checkImg">
					<template #upload>
						<van-image radius="8rpx" width="200rpx" height="200rpx" fit="cover" :src="c1" />
					</template>
				</UploadImg>
			</view>
		</view>
		<view class="opinion-feedback-item">
			<view class="opinion-feedback-title">
				举报说明<text>*</text>：
			</view>
			<van-field v-model="state.message" rows="3" autosize type="textarea" maxlength="150" placeholder="请输入留言"
				show-word-limit />
		</view>
		<van-button type="primary" :loading="state.isLoading" @click="submitFn">确认</van-button>
	</view>
</template>

<script setup>
	import {
		reactive,
		getCurrentInstance,
		onMounted
	} from "vue"
	import {
		getAuthorization,
		setAuthorization
	} from "@/utils/auth.js"
	import {
		onLoad
	} from '@dcloudio/uni-app'
	import PhotoListItem from "@/components/photoListItem/index.vue"
	import {
		showConfirmDialog
	} from 'vant';
	import c1 from "@/assets/image/bg9.png"

	let {
		proxy
	} = getCurrentInstance()

	const state = reactive({
		show: false,
		itemList: [],
		userid: "",
		isLoading: false,
		tipOffTypeID: null,
		FileList: []
	})

	onLoad((options) => {
		// 举报
		if (options.type == 2) {
			state.userid = options.userId
			TipOffTypeFn()
		}
	})

	const checkedFn = (item) => {
		state.itemList.forEach(o => {
			if (o.ID == item.ID) {
				o.checked = !o.checked
			} else {
				o.checked = false
			}
			if (o.checked) {
				state.tipOffTypeID = item.ID
			}
		})
	}

	import {
		TipOffUser,
		TipOffType
	} from "@/api/user/index.js"
	const TipOffTypeFn = async () => {
		let data = await proxy.$get(TipOffType)
		if (data.code == 200) {
			data.data.forEach(o => {
				o.checked = false
			})
			state.itemList = data.data
		}
	}

	const checkImg = (item) => {
		state.FileList = state.FileList.concat(item)
	}

	const delFn = (index) => {
		state.FileList.splice(index, 1)
	}

	// 举报用户提交
	const submitFn = async () => {
		let userId = getAuthorization("userId")
		let FileIDs = state.FileList.map(o => o.ID)
		let params = {
			"text": state.message,
			"userID": userId,
			"tipOffTypeID": 2,
			"toUserID": state.userid,
			"dataID": state.userid,
			"dataType": 8,
			"FileIDs": FileIDs
		}
		try {
			state.isLoading = true
			let data = await proxy.$post(TipOffUser, params)
			state.isLoading = false
			if (data.code == 200) {
				history.back()
			}
		} catch (error) {
			state.isLoading = false
			uni.showToast({
				title: error.message,
				icon: ""
			})
		}


	}
</script>

<style lang="scss" scoped>
	.opinion-feedback {
		padding-top: 30rpx;
		min-height: 100vh;
	}

	.opinion-feedback-title {
		margin-bottom: 30rpx;
		font-weight: 600;

		text {
			color: #f00;
			font-size: 30rpx;
			line-height: 2;
		}
	}


	.opinion-feedback-item {
		padding: 30rpx;
	}

	.opinion-feedback-content-list {
		display: flex;
		flex-wrap: wrap;

		.opinion-feedback-content-item {
			display: flex;
			font-size: 28rpx;
			width: 33.33%;
			margin-bottom: 20rpx;

			img {
				width: 40rpx;
				height: 40rpx;
				margin-right: 10rpx;
			}
		}
	}

	.image-list {
		display: flex;
		flex-wrap: wrap;

		.image-list-item {
			position: relative;

			.uni-icons {
				position: absolute;
				top: 0;
				right: 0;
				transform: translate(0, -50%);
				border-radius: 50%;
				border: 2rpx solid #fff;
			}
		}

		.van-image {
			display: block;
			flex: none;
			margin: 0 30rpx 30rpx 0;
		}
	}



	.van-field {
		background: #F5F6F8;
	}

	.van-button {
		height: 100rpx;
		width: calc(100% - 60rpx);
		line-height: 100rpx;
		margin-left: 30rpx;
		font-size: 36rpx;
		position: fixed;
		bottom: 30rpx;
	}
</style>
